<div id="navbar">
    <template>
        <b-navbar spaced shadow transparent wrapper-class="{% block navclass %}container{% endblock %}">
            <template #brand>
                <b-navbar-item tag="div">
                    {% block navbar_logo %}
                    <h1 class="is-size-4 has-text-weight-medium">家电之选</h1>
                    {% endblock %} 
                </b-navbar-item>
            </template>
            <template #start>
                {% block navbar_start %}
                <b-navbar-item href="{% url 'goods:index' %}">
                    首页
                </b-navbar-item>
                <b-navbar-item href="{% url 'goods:list' 'all' 1 %}">
                    全部分类
                </b-navbar-item>
                {% for goods_type in goods_types %}
                <b-navbar-dropdown label="{{ goods_type.name }}">
                    {% for name in goods_type.navs %}
                    <b-navbar-item href="#">
                        {{ name }}
                    </b-navbar-item>
                    {% endfor %}
                </b-navbar-dropdown>
                {% endfor %}
                {% endblock %}             
            </template>
            <template #end>
                {% block navbar_end %}
                <b-navbar-item tag="div">
                    <form action="{% url 'goods:search' 1 %}" method="get">
                        {% csrf_token %}
                        <div class="field-body">
                          <div class="field is-expanded">
                            <div class="field has-addons">
                              <p class="control is-expanded has-icons-left">
                                <input class="input" type="search" name="search" id="id_search" value="" placeholder="搜索心仪的商品吧！" maxlength="32">
                                <span class="icon is-left">
                                    <i class="mdi mdi-magnify"></i>
                                </span>
                              </p>
                              <p class="control has-icons-right">
                                <input class="button is-primary" type="submit" value="搜索">
                              </p>
                            </div>
                          </div>
                        </div>
                    </form>
                </b-navbar-item>
                {% endblock %} 
            </template>
        </b-navbar>
    </template>
</div>

<script>
    var navbar = new Vue({
        el: '#navbar',
        delimiters: ['{$', '$}']
    })
</script>